<template>
	<view class="content">
		<view class="u-flex-xy-center title">
			<text class="name">{{name}}</text>
			<view class="open_popover" @click="shut_down">
				{{$http_cos}}
				<image :src="`${$http_cos}/static/open_popover.png`"></image>
			</view>
		</view>
		 <picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
		            <picker-view-column>
		                <view class="item" v-for="(item,index) in columns" :key="index">{{item}}</view>
		            </picker-view-column>
		 </picker-view>
		 
		<view class="submit" @click="submit">
			<text>提交</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'yyPicker',
		props: {
			name: {
				type: String,
				default: false
			},
			value:{
				type:Number,
				default:false
			}
		},
		data() {
			return {
				// value:[0],
				indicatorStyle: `height: 48px;`,
				columns:[1,2,3]
			}
		},
		onLoad() {

		},
		methods: {
			bindChange(e) {
				console.log(e)
			this.value=e.detail.value[0]
			},
			shut_down(){
				this.$emit('close')
			},
			submit() {
				let isclick=true
				if(isclick){
					isclick=false
					this.$emit('submit',this.value)
					// uni.navigateTo({
					// 	url:'./perfect_data_five/index',
					// 	success: () => {
					// 		isclick=true	
					// 	}
					// })
				}
				
			}
		}
	}
</script>

<style lang="scss">
	// @import "../../libs/css/components.scss";
	
	.u-picker {
		position: relative;
	
		&__view {
	
			&__column {
				@include flex;
				flex: 1;
				justify-content: center;
	
				&__item {
					@include flex;
					justify-content: center;
					align-items: center;
					font-size: 16px;
					text-align: center;
					/* #ifndef APP-NVUE */
					display: block;
					/* #endif */
					color: $u-main-color;
	
					&--disabled {
						/* #ifndef APP-NVUE */
						cursor: not-allowed;
						/* #endif */
						opacity: 0.35;
					}
				}
			}
		}
	
		&--loading {
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			@include flex;
			justify-content: center;
			align-items: center;
			background-color: rgba(255, 255, 255, 0.87);
			z-index: 1000;
		}
	}
	.content {
		padding:0 40rpx;
		box-sizing: border-box;
		background-color: #fff;
		height:687rpx;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		.title{
			padding: 71rpx 0 0;
			box-sizing: border-box;
			position: relative;
			text{
				font-size: 34rpx;
				font-weight: 400;
				color: #111111;
			}
			.open_popover{
				width: 32rpx;
				height:32rpx;
				position: absolute;
				right:8rpx;
				
			}
		}
		.picker-view {
				width: 100%;
				height:288rpx;
			}
			.item {
				height: 48px;
				line-height:48px;
				align-items: center;
				justify-content: center;
				text-align: center;
			}
		
	}

	
</style>
